<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>屏幕录制</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

        video {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100vh;
            width: 100vw;
        }
       .font-29{
           font-size: 29px;
           font-weight: 700;

       }

        .margin-left-40{
            margin-left: 40px;
        }

        .waring{
            color: bisque;
            background: #000;
            display: inline-block;
            padding: 8px;
            border-radius: 2px;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <section>
        <div class="font-29">点击左侧录制按钮开始</div>
        <div class="waring">如果不能正常运行或者控制台报错保存本地或者https环境即可</div>
    </section>

    <button id="get-screen" style="display: block;">开始录制</button>
    <button id="stop-screen" style="display: none;">停止录制</button>
    <video id="video"></video>
    <script>
        console.log("在giteePage上面可能会报错");

        let recordedBlobs = []
        let stream = null;
        let mediaRecorder = null;
        const preview = false;
        const video = document.getElementById('video')
        const getScreen = document.getElementById('get-screen');
        const stopScreen = document.getElementById('stop-screen');
        const options = {
            audioBitsPerSecond: 128000,
            videoBitsPerSecond: 4500000,
            mimeType: 'video/webm'
        };
        let startTime = 0;
        let endTime = 0;

        function stopReset() {
            recordedBlobs = []
            stopScreen.style.display = 'none';
            video.style.display = 'none';
            getScreen.style.display = 'inline';
        }

        stopScreen.addEventListener('click', event => {
            console.log("结束录制,录制时长:" + (new Date().getTime() - startTime) / 1000 + 's');
            stopReset();
        });
        getScreen.addEventListener('click', event => {
            try {
                navigator.mediaDevices.getDisplayMedia({ video: true,audio:true })
                .then(stream => {
                    console.log("开始录制");
                    startTime = new Date().getTime()
                    this.stream = stream;

                    getScreen.style.display = 'none';
                    stopScreen.style.display = 'inline';

                    mediaRecorder = new MediaRecorder(stream, options);
                    mediaRecorder.ondataavailable = event => {
                        if (event.data.size > 0) {
                            console.log("结束录制,录制时长:" + (new Date().getTime() - startTime) / 1000 + 's');
                            recordedBlobs.push(event.data);
                            download();
                            stopReset();
                        }
                    };
                    mediaRecorder.start();
                    if (preview) {
                        // 是否显示预览
                        video.srcObject = stream  // 将流赋值给video标签 用于播放
                        video.onloadedmetadata = (e) => video.play()
                        const recorder = new MediaRecorder(stream) // 用于视频保存
                        recorder.ondataavailable = e => {
                            let herf = e.data
                            download.href = URL.createObjectURL(herf)
                        }
                        recorder.start()
                        stopScreen.onclick = function () {
                            video.pause()
                            recorder.stop()
                        }
                    }

                }, error => console.log(error))
            } catch (error) {
                console.error("错误信息:"+error);
                console.error("保存本地运行");
            }

        });

        function download() {
            const blob = new Blob(recordedBlobs, { type: 'video/mp4' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            document.body.appendChild(a);
            a.style.display = 'none';
            a.href = url;
            a.download = new Date() + '.mp4';
            a.click();
            window.URL.revokeObjectURL(url);
        }
    </script>
</body>

</html>